<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript第九课</title>
    <script src="../JavaScript_Lesson16/js/jquery-3.4.1.min.js"></script>
    <style>
        .color{
            color: red;
        }
        .size{
            font-size: 80px;
        }

        .family{
            font-family: 宋体;
        }
    </style>

</head>

<body>
    <!-- HTML结构 -->
    <ul id="test-ul">
        <li class="js"><a href="">JavaScript</a> </li>
        <li name="book">Java &amp; JavaScript</li>
        
    </ul>

    <font>中国祝福你</font>
    <br>
    <font>三千越甲可吞吴</font>
    <br>
    <font>谢海恩</font>
    <br>
    <font>罗布</font>
    <br>
    <font>然后什么然后</font>
    <br>
    <font>我的九寨</font>
    <br>
    <font>大道三千</font>
    <br>
    <font>三千大世界</font>
    <br>
    <font>小说看多了你</font>
</body>
<script src="js/js.js"></script>
<script>
    console.log($(window).height());
    console.log($(window).width());


    console.log($(document).height());
    console.log($(document).width());



    var font=$('font');

    font.last().attr('胡哥','你好呀！');
    font.last().attr('王俊俊','你好呀！');
    font.last().attr('叶子','你好呀！');
    font.last().attr('学姐','你好呀！');

    font.last().removeAttr('学姐');

    setTimeout(() => {
        console.log(font.first().height());
    }, 2000);

    setTimeout(() => {
        font.first().show();
    }, 3000);
</script>

<!-- HTML结构 -->
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
<!-- 除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点： -->

<script>    
    var ul = $('#test-div>ul');
    var lan = ['Pascal','Lua','Ruby'];

    var n = ul.find('span').map((index,item)=>{
        console.log(item);
        return $(item).text();
    }).get();

    console.log(n);

    lan = lan.concat(n).sort();

    var strlan = lan.map(function(a){
        return '<li><span>' + a + '</span></li>';
    }).join('');
    ul.html(strlan);


</script>
</html>